<template>
  <div class="header">欢迎登录永州市疲劳驾驶查询平台</div>
  <div class="login-wrapper">
    <div class="title">注 册</div>
    <div class="login">
      <div class="form-item">
        <input
          type="text"
          class="form-control"
          placeholder="请输入账户"
          id="username"
        />
      </div>
      <div class="form-item">
        <input
          type="password"
          class="form-control"
          placeholder="请输入密码"
          id="password"
        />
      </div>
      <div class="form-item">
        <input
          type="password"
          class="form-control"
          placeholder="请输入确认密码"
          id="confirm-password"
        />
      </div>
      <button class="login-btn btn-block" @click="handleLogin">
        <span class="iconfont icon-login-full" style="margin-right: 10px"></span
        >注 册
      </button>
    </div>
    <div class="copyright">
      Copyright ©
      <span id="fullyear"></span> 湖南超云信息科技有限公司 All Rights Reserved
    </div>
    <!-- <div class="time">
      <span id="nowtime"></span>
    </div> -->
  </div>
  <canvas id="canvas"></canvas>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import "element-plus/theme-chalk/el-message.css";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();

// 时钟
// let newDate = ref("");

// const dateFilter = date => {
//   if (date < 10) {
//     return "0" + date;
//   }
//   return date;
// };

// const getLangDate = () => {
//   var dateObj = new Date(); //表示当前系统时间的Date对象
//   var year = dateObj.getFullYear(); //当前系统时间的完整年份值
//   var month = dateObj.getMonth() + 1; //当前系统时间的月份值
//   var date = dateObj.getDate(); //当前系统时间的月份中的日
//   var day = dateObj.getDay(); //当前系统时间中的星期值
//   var weeks = [
//     "星期日",
//     "星期一",
//     "星期二",
//     "星期三",
//     "星期四",
//     "星期五",
//     "星期六"
//   ];
//   var week = weeks[day]; //根据星期值，从数组中获取对应的星期字符串
//   var hour = dateObj.getHours(); //当前系统时间的小时值
//   var minute = dateObj.getMinutes(); //当前系统时间的分钟值
//   var second = dateObj.getSeconds(); //当前系统时间的秒钟值
//   var timeValue = "" + (hour >= 12 ? (hour >= 18 ? "晚上" : "下午") : "上午"); //当前时间属于上午、晚上还是下午
//   newDate.value =
//     year +
//     "年" +
//     month +
//     "月" +
//     date +
//     "日 " +
//     week +
//     " " +
//     dateFilter(hour) +
//     ":" +
//     dateFilter(minute) +
//     ":" +
//     dateFilter(second);
//   document.getElementById("nowtime").innerHTML = newDate.value;
//   setTimeout(getLangDate, 1000);
// };

const handleLogin = () => {
  // 模拟登录请求，实际应用中替换为API调用
  // const response = await loginService(username, password)
  // const userToken = response.data.token
  if (document.getElementById("username").value.length === 0) {
    ElMessage({
      message: "请输入账户",
      type: "error",
    });
    document.getElementById("username").focus();
    return false;
  }

  if (document.getElementById("password").value.length === 0) {
    ElMessage({
      message: "请输入密码",
      type: "error",
    });
    document.getElementById("password").focus();
    return false;
  }

  if (document.getElementById("confirm-password").value.length === 0) {
    ElMessage({
      message: "请输入确认密码",
      type: "error",
    });
    document.getElementById("confirm-password").focus();
    return false;
  }

  if (document.getElementById("confirm-password").value !== document.getElementById("password").value) {
    ElMessage({
      message: "确认密码和密码不一致！",
      type: "error",
    });
    document.getElementById("confirm-password").focus();
    return false;
  }

  router.push("/");

  const formData = new FormData();
  formData.append("account", document.getElementById("username").value);
  formData.append("password", document.getElementById("password").value);

  axios
    .post(`http://65.29.3.198:60089/YzFatigueDriving/YzUser/add`, formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    })
    .then((resp) => {
      console.log("注册通信成功");
      console.log(resp.data);
      if (resp.data.code === 200) {
        ElMessage({
          message: "注册成功",
          type: "success",
        });

        setTimeout(() => {
            router.push("/login");
        }, 1000)
      } else {
        ElMessage({
          message: resp.data.msg,
          type: "error",
        });
      }
    })
    .catch((error) => {
      (err) => {
        console.log(err);
        ElMessage({
          message: JSON.stringify(err),
          type: "error",
        });
      };
    });
};

onMounted(() => {
  document.getElementById("fullyear").innerText = new Date()
    .getFullYear()
    .toString();

  // getLangDate();

  //宇宙特效
  var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    w = (canvas.width = window.innerWidth),
    h = (canvas.height = window.innerHeight),
    hue = 217,
    stars = [],
    count = 0,
    maxStars = 1300; //星星数量

  var canvas2 = document.createElement("canvas"),
    ctx2 = canvas2.getContext("2d");
  canvas2.width = 100;
  canvas2.height = 100;
  var half = canvas2.width / 2,
    gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
  gradient2.addColorStop(0.025, "#CCC");
  gradient2.addColorStop(0.1, "hsl(" + hue + ", 61%, 33%)");
  gradient2.addColorStop(0.25, "hsl(" + hue + ", 64%, 6%)");
  gradient2.addColorStop(1, "transparent");

  ctx2.fillStyle = gradient2;
  ctx2.beginPath();
  ctx2.arc(half, half, half, 0, Math.PI * 2);
  ctx2.fill();

  // End cache

  function random(min, max) {
    if (arguments.length < 2) {
      max = min;
      min = 0;
    }

    if (min > max) {
      var hold = max;
      max = min;
      min = hold;
    }

    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function maxOrbit(x, y) {
    var max = Math.max(x, y),
      diameter = Math.round(Math.sqrt(max * max + max * max));
    return diameter / 2; //星星移动范围，值越大范围越小，
  }

  var Star = function () {
    this.orbitRadius = random(maxOrbit(w, h));
    this.radius = random(60, this.orbitRadius) / 16; //星星大小
    this.orbitX = w / 2;
    this.orbitY = h / 2;
    this.timePassed = random(0, maxStars);
    this.speed = random(this.orbitRadius) / 500000; //星星移动速度
    this.alpha = random(2, 10) / 10;

    count++;
    stars[count] = this;
  };

  Star.prototype.draw = function () {
    var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
      y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
      twinkle = random(10);

    if (twinkle === 1 && this.alpha > 0) {
      this.alpha -= 0.05;
    } else if (twinkle === 2 && this.alpha < 1) {
      this.alpha += 0.05;
    }

    ctx.globalAlpha = this.alpha;
    ctx.drawImage(
      canvas2,
      x - this.radius / 2,
      y - this.radius / 2,
      this.radius,
      this.radius
    );
    this.timePassed += this.speed;
  };

  for (var i = 0; i < maxStars; i++) {
    new Star();
  }

  function animation() {
    ctx.globalCompositeOperation = "source-over";
    ctx.globalAlpha = 0.5; //尾巴
    ctx.fillStyle = "hsla(" + hue + ", 64%, 6%, 2)";
    ctx.fillRect(0, 0, w, h);

    ctx.globalCompositeOperation = "lighter";
    for (var i = 1, l = stars.length; i < l; i++) {
      stars[i].draw();
    }

    window.requestAnimationFrame(animation);
  }

  animation();
});
</script>

<style scoped less>
#canvas {
  margin: 0;
  padding: 0;
  height: 100%;
  z-index: 1;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 125px;
  padding-top: 10px;
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px #34dffd;
  background: url("./assets/images/header_bg.png") no-repeat scroll center
    bottom;
  background-size: cover;
}

.login-wrapper {
  z-index: 100;
  width: 500px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -250px;
}

.title {
  height: 36px;
  line-height: 36px;
  margin-bottom: 50px;
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
}

.title span {
  font-weight: bold;
  color: rgb(27, 85, 226);
}

.login {
  background: rgba(255, 255, 255, 0.1);
  /* background: #2c353c; */
  padding: 50px;
  border-radius: 5px;
  border: 1px solid #000;
}

.form-item {
  margin-bottom: 15px;
}

.form-control {
  border: 0px;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px 15px;
  color: #ccc;
  line-height: 20px;
  height: 40px;
  width: 100%;
  box-sizing: border-box;
  /* -webkit-transition: all 200ms ease; */
}

.login-btn {
  width: 100%;
  text-align: center;
  margin-top: 30px;
  font-size: 16px;
  line-height: 20px;
  display: inline-block;
  padding: 8px 12px;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 4px;
  color: #fff !important;
  border-color: #4361ee;
  background: linear-gradient(
    0deg,
    rgba(0, 3, 255, 0.6) 0,
    rgba(2, 126, 251, 1) 100%
  );
  box-shadow: 0 10px 20px -10px #4361ee;
  display: flex;
  text-align: center;
  justify-content: center;
}

.login-btn:hover {
  background-color: #4361ee !important;
  border-color: #4361ee;
  background: linear-gradient(
    0deg,
    rgba(0, 3, 255, 0.8) 0,
    rgba(2, 126, 251, 1) 100%
  );
}

.copyright {
  height: 20px;
  line-height: 20px;
  margin-top: 10px;
  color: #999;
  text-align: center;
  font-size: 13px;
}

.time {
  height: 20px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;

  span {
    color: blue;
    font-size: 12px;
    color: #999;
  }
}

.clock {
  position: absolute;
  left: 0;
  top: 0;
  width: 500px;
  height: 500px;
  /* z-index: -1; */
}
</style>